<docs lang="markdown">
[We want to segment some images we shot with a phone.]
</docs>

<config lang="json">
{
  "name": "UC2 Janelia Workshop",
  "type": "window",
  "tags": [],
  "ui": "",
  "version": "0.1.0",
  "cover": "",
  "description": "[This is a boilerplate for an UC2 ImJoy plugin.]",
  "icon": "extension",
  "inputs": null,
  "outputs": null,
  "api_version": "0.1.2",
  "env": "",
  "permissions": [],
  "requirements": [
    "https://unpkg.com/axios/dist/axios.min.js",
    "https://unpkg.com/spectre.css/dist/spectre.min.css",
    "https://unpkg.com/spectre.css/dist/spectre-exp.min.css",
    "https://unpkg.com/spectre.css/dist/spectre-icons.min.css"],
  "dependencies": ["bionanoimaging/UC2-ImJoy-GIT:UC2_tools_janelia"],
  "defaults": {"w": 20, "h": 10}
}
</config>

<script lang="javascript">

class ImJoyPlugin {
  async setup() {
    api.log('initialized')
    // asuming you have a python plugin named "UC2_tools_janelia", with a function named "getEngineURL" which returns api.ENGINE_URL, and another function "setParam1".
    const plugin = await api.getPlugin("UC2_tools_janelia")
    const engine_url = await plugin.getEngineURL() // 'https://imjoy.pasteur.cloud'
    const fileInput = document.getElementById("file-input");
    // If user selected a new file or take a new photo, load it and do prediction.
    window.process = async ()=>{
      const file = fileInput.files[0]
      const upload_url = await api.requestUploadUrl({path: 'test.jpg', overwrite: true, engine: engine_url})
      const bodyFormData = new FormData();
      bodyFormData.append(
        "file",
        new Blob([file], {
          type: "application/octet-stream",
        })
      );
      await api.showMessage("Uploading a file to " + upload_url);
      await axios({
        method: "post",
        url: upload_url,
        data: bodyFormData,
        headers: { "Content-Type": "multipart/form-data" },
      })
      const param1 = document.getElementById("param1");
      await api.showMessage("Starting to Process image with Param: " + param1);
      await plugin.setParam1(param1.value)
      await plugin.setURL('./test.jpg')
      await plugin.process()
      await api.showMessage("Uploading a file to " + upload_url);
    }
  }

  async run(ctx) {

  }
}

api.export(new ImJoyPlugin())
</script>

<window lang="html">
  <div>
    <br>
    <input type="file" id="file-input">
    <br>
    <br>
    param1: <input type="number" value="123" id="param1">
    <br>
    <br>
    <button class="btn" onclick="process()">Process</button>
  </div>
</window>

<style lang="css">

</style>
